<template>
    <div>
        <div class="margin-top">
            <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" style="width: 500px">
                <el-form-item label="年份" prop="year">
                    <el-date-picker v-model="year" type="year" placeholder="选择年" value-format="yyyy" @change="changeYear"></el-date-picker>
                </el-form-item>                   
                <el-form-item label="项目" prop="type_id">
                    <el-select v-model="formData.type_id" placeholder="请选择类型" @change="getSubType">
                      <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="细分项目" prop="subtype_id">
                    <el-select v-model="formData.subtype_id" placeholder="请选择类型">
                      <el-option v-for="item in subtypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="口岸类型" prop="port_type_id">
                    <el-select v-model="formData.port_type_id" placeholder="请选择类型">
                      <el-option v-for="item in porttypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>                            
                <el-form-item label="来源国家" prop="country_id">
                    <el-select v-model="formData.country_id" placeholder="请选择地区">
                      <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="quantity">
                    <el-input v-model="formData.quantity" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>
                <el-form-item label="金额" prop="amount">
                    <el-input v-model="formData.amount" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"></el-input>
                </el-form-item>                
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
                    <el-button @click="resetForm('formData')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "ExportEdit",
    data() {
        return {
            data: {},
            type_id:'',
            subtype_id:'',
            port_type_id:'',
            country_id:'',
            typeList:[],
            subtypeList:[],
            porttypeList:[],
            countryList:[],
            year:'', 
            formData: {
                id:'',
                type_id:'',
                subtype_id:'',
                port_type_id:'',
                year:'',
                quantity:'',
                amount:'',
                country_id:'',
                created_at:''  
            },
            rules: {
                type_id: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                subtype_id: [
                    { required: true, message: '请选择子类型', trigger: 'change' },
                ],                
                port_type_id: [
                    { required: true, message: '请选择口岸类型', trigger: 'change' }
                ],
                country_id: [
                    { required: true, message: '请选择来源国家', trigger: 'change' }
                ],                
                year: [
                    { required: true, message: '请选择年份', trigger: 'change' }
                ],
                quantity: [
                    { required: true, message: '请填写数量'},
                    //如果是需要校验整数，并且必须大于0，请统一使用此方法校验，校验的trigger最好不要
                    { validator: this.$utils.mustNumber,  message: '最少必须是1'}
                ],
                amount: [
                    { required: true, message: '请填写数量'},
                    //如果是需要校验整数，并且必须大于0，请统一使用此方法校验，校验的trigger最好不要
                    { validator: this.$utils.mustNumber,  message: '最少必须是1'}
                ]   
            }
        }
    },
    created() {
        this.formData.id = this.$route.params.id
    },    
    mounted() {
        this.getRecord();
        this.getType();
        this.getPortType();
        this.getCountry();
    },
    methods:{
        update() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/export/quantity/update',
                datas:this.formData,
                success(res){
                    //成功回调
                    //res 为data字段数据
                    console.log(res);
                    _this.$utils.success('成功！');
                    _this.$router.replace({path:'/export'});
                }
                //当不需要处理错误时，就不要写fail的回调，否则将没有错误提示，fail是作为参数传递到http中的
            })
        },
        getRecord() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/export/quantity/show',
                datas:{id:this.formData.id},
                success(res){
                    //成功回调
                    //res 为data字段数据
                    _this.data = res ? res : [];
                    _this.formData.type_id = _this.data.type_id;
                    _this.formData.subtype_id = _this.data.subtype_id;
                    _this.formData.port_type_id = _this.data.port_type_id;
                    _this.formData.country_id = _this.data.country_id;
                    _this.formData.year = _this.data.year;
                    _this.formData.quantity = _this.data.quantity;
                    _this.formData.amount = _this.data.amount;
                    _this.getSubType(_this.data.type_id);
                    _this.year = new Date(res.year,1,1);  
                },
                //当不需要处理错误时，就不要写fail的回调，否则将没有错误提示，fail是作为参数传递到http中的
            })
        },
        getType() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/export/type',
                datas:null,
                success(res){
                    _this.typeList = res.data ? res.data : [];
                }
            })
        },  
        getSubType(typeId){
            let _this = this;
            this.$http.httpPost({
                url:'/api/export/subtype',
                datas:{"type_id":typeId},
                success(res){
                    _this.subtypeList = res.data ? res.data : [];
                }
            })
        }, 
        getPortType(){
            let _this = this;
            this.$http.httpPost({
                url:'/api/export/porttype',
                datas:null,
                success(res){
                    _this.porttypeList = res.data ? res.data : [];
                }
            })
        },
        getCountry(){
            let _this = this;
            this.$http.httpPost({
                url:'/api/country',
                datas:null,
                success(res){
                    _this.countryList = res.data ? res.data : [];
                }
            })
        },  
        changeYear(year) {
            this.formData.year = year;
        },        
        submitForm(formName) {
            //存在回调的方法，因为回调外和回调内的作用域不一致，所以务必为 _this 复制 this，否则在回调中无法访问this对象
            let _this = this;
            //通过传递form表单ref名称，来调用表单的validate方法
            this.$refs[formName].validate((valid) => {
                //为true时验证通过
                if (valid) {
                    _this.update();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$utils.message('清空');
            this.$refs[formName].resetFields();
        }
    }
}
</script>
